/**
 * 文件名称: api-utils.js
 * 完整存储路径: frontend/static/js/api-utils.js
 * 功能说明:
 *     通用API请求处理工具，统一处理Token过期、错误处理等
 *     提供友好的用户体验，避免直接显示JSON错误信息
 *     
 * 主要功能:
 *     - 统一的API请求处理（包括Token验证）
 *     - Token过期友好提示和自动跳转
 *     - 错误信息格式化和用户友好显示
 *     - 自动添加Authorization头
 *     
 * 使用方法:
 *     替换fetch调用为ApiUtils.request()
 *     
 * 创建日期: 2025-09-02
 * 创建原因: 解决Token过期时显示不友好JSON错误信息的问题
 */

window.ApiUtils = {
    
    /**
     * 显示消息提示
     * @param {string} message 消息内容
     * @param {string} type 消息类型 (success, error, warning, info)
     */
    showMessage: function(message, type = 'info') {
        // 创建消息容器（如果不存在）
        let messageContainer = document.getElementById('api-message-container');
        if (!messageContainer) {
            messageContainer = document.createElement('div');
            messageContainer.id = 'api-message-container';
            messageContainer.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                z-index: 9999;
                max-width: 400px;
            `;
            document.body.appendChild(messageContainer);
        }
        
        // 创建消息元素
        const alertDiv = document.createElement('div');
        const alertClass = {
            'success': 'alert-success',
            'error': 'alert-danger',
            'warning': 'alert-warning',
            'info': 'alert-info'
        }[type] || 'alert-info';
        
        const iconClass = {
            'success': 'bi-check-circle',
            'error': 'bi-exclamation-triangle',
            'warning': 'bi-exclamation-triangle',
            'info': 'bi-info-circle'
        }[type] || 'bi-info-circle';
        
        alertDiv.className = `alert ${alertClass} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            <i class="bi ${iconClass}"></i>
            <span class="ms-2">${message}</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        messageContainer.appendChild(alertDiv);
        
        // 自动消失
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.remove();
            }
        }, 5000);
    },
    
    /**
     * 统一的API请求方法
     * @param {string} url 请求URL
     * @param {object} options fetch选项
     * @returns {Promise} 请求Promise
     */
    request: async function(url, options = {}) {
        const token = localStorage.getItem('access_token');
        
        // 检查Token是否存在
        if (!token) {
            this.showMessage('请先登录', 'error');
            setTimeout(() => {
                window.location.href = '/auth/login';
            }, 2000);
            throw new Error('未找到访问令牌');
        }
        
        // 设置默认选项
        const defaultOptions = {
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`
            }
        };
        
        // 合并选项
        const finalOptions = {
            ...defaultOptions,
            ...options,
            headers: {
                ...defaultOptions.headers,
                ...options.headers
            }
        };
        
        console.log(`API Request: ${finalOptions.method || 'GET'} ${url}`);
        
        try {
            const response = await fetch(url, finalOptions);
            console.log(`API Response status: ${response.status}`);
            
            // 处理不同的响应状态
            if (!response.ok) {
                if (response.status === 401) {
                    // Token过期处理
                    localStorage.removeItem('access_token');
                    this.showMessage('登录已过期，请重新登录', 'warning');
                    
                    // 显示确认对话框
                    if (confirm('您的登录已过期，是否重新登录？')) {
                        window.location.href = '/auth/login';
                    } else {
                        // 用户取消，延迟跳转
                        setTimeout(() => {
                            window.location.href = '/auth/login';
                        }, 3000);
                    }
                    
                    throw new Error('Token已过期');
                }
                
                if (response.status === 403) {
                    this.showMessage('权限不足，无法执行此操作', 'error');
                    throw new Error('权限不足');
                }
                
                if (response.status === 404) {
                    this.showMessage('请求的资源不存在', 'error');
                    throw new Error('资源不存在');
                }
                
                if (response.status >= 500) {
                    this.showMessage('服务器错误，请稍后重试', 'error');
                    throw new Error(`服务器错误: ${response.status}`);
                }
                
                // 其他错误
                throw new Error(`HTTP错误: ${response.status}`);
            }
            
            // 解析响应
            const data = await response.json();
            console.log('API Response data:', data);
            
            // 检查业务层面的成功状态
            if (data.success === false) {
                // 显示业务错误消息
                this.showMessage(data.message || '操作失败', 'error');
                throw new Error(data.message || '操作失败');
            }
            
            return data;
            
        } catch (error) {
            console.error('API Request failed:', error);
            
            // 网络错误
            if (error.name === 'TypeError' && error.message.includes('fetch')) {
                this.showMessage('网络连接失败，请检查网络', 'error');
                throw new Error('网络连接失败');
            }
            
            // 如果是我们已经处理过的错误，不再显示额外消息
            if (['Token已过期', '权限不足', '资源不存在'].includes(error.message)) {
                throw error;
            }
            
            // 其他未处理的错误
            this.showMessage(`请求失败: ${error.message}`, 'error');
            throw error;
        }
    },
    
    /**
     * GET请求的便捷方法
     * @param {string} url 请求URL
     * @param {object} options 额外选项
     * @returns {Promise} 请求Promise
     */
    get: function(url, options = {}) {
        return this.request(url, { ...options, method: 'GET' });
    },
    
    /**
     * POST请求的便捷方法
     * @param {string} url 请求URL
     * @param {object} data 请求数据
     * @param {object} options 额外选项
     * @returns {Promise} 请求Promise
     */
    post: function(url, data = {}, options = {}) {
        return this.request(url, {
            ...options,
            method: 'POST',
            body: JSON.stringify(data)
        });
    },
    
    /**
     * PUT请求的便捷方法
     * @param {string} url 请求URL
     * @param {object} data 请求数据
     * @param {object} options 额外选项
     * @returns {Promise} 请求Promise
     */
    put: function(url, data = {}, options = {}) {
        return this.request(url, {
            ...options,
            method: 'PUT',
            body: JSON.stringify(data)
        });
    },
    
    /**
     * DELETE请求的便捷方法
     * @param {string} url 请求URL
     * @param {object} options 额外选项
     * @returns {Promise} 请求Promise
     */
    delete: function(url, options = {}) {
        return this.request(url, { ...options, method: 'DELETE' });
    }
};

// 添加必要的CSS样式
if (!document.getElementById('api-utils-styles')) {
    const style = document.createElement('style');
    style.id = 'api-utils-styles';
    style.textContent = `
        #api-message-container .alert {
            margin-bottom: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        #api-message-container .alert i {
            font-size: 1.1em;
        }
    `;
    document.head.appendChild(style);
}

console.log('ApiUtils initialized');
